<template>
  <div>
    <div class="wrap">
        <!-- 播放器主题区域 -->
        <h1 class="player_loge"><a href="#">小涵音乐</a></h1>
        <div class="play_wrap" id="player">
            <div class="search_bar">

                <!-- 搜索歌曲 -->
                <input   class="serach_txt" type="text" autocomplete="off" v-model='query' @keyup.enter="searchMusic" placeholder="请输入想听的歌" autofocus="autofocus" />
                <button class="input_sub" @click="searchMusic" >搜索</button>
            </div>
            <!-- 搜索歌曲列表 -->
            <div class="center_con">
                <div class='song_wrapper'>
                    <ul class="song_list">
                        <li v-for="(item,index) in musicList" :key="index">
                            <!-- 点击放歌 -->
                            <a href="javascript:;" @click='playMusic(item.id)'></a>
                            <input type="button" value="播放" @click='playMusic(item.id)'>
                            <b>{{item.name}}</b>
                            <input type="button" value="mv" v-if="item.mvid!=0" @click="playMv(item.mvid)">
                            <span v-if="item.mvid!=0" @click="playMv(item.mvid)">
                                <i></i>
                            </span>
                        </li>
                    </ul>

                </div>
                <!-- 歌曲封面 -->
                <div class="player_ con">
                    <img src="" alt="" class="play_bar">
                    <img src="" alt="" class="disc autoRotate">
                    <img :src="musicCover" alt="" class="cover autoRotate">

                </div>

            </div>
            <!-- 歌曲评论 -->
            <div class="comment_wrapper">
                <h5 class="title">热门留言</h5>
                <div class="comment_list">
                    <dl v-for="(item,index) in hotComments" :key="index">
                        <!-- 评论头像 -->
                        <dt><img :src="item.user.avatarUrl" alt=""></dt>
                        <dd class="name">{{item.nickname}}</dd>
                        <dd class="detail">{{item.content}}</dd>
                    </dl>

                </div>
            </div>

            <!-- 播放区域 -->
            <div class="audio_con">
                <audio ref='audio' @play='play' @pause='pause' :src="musicUrl" controls autoplay loop
                    class="myaudio"></audio>
            </div>

            <!-- mv播放 -->
            <div class="video_con" v-show='isShow' style="display: none;">
                <video :src="mvUrl" controls="controls"></video>
                <div class="mask" @click="hide"></div>
            </div>
        </div>

  </div>
  </div>

</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      // 搜索关键字
      query: '',
      // 歌曲列表
      musicList: [],
      // 歌曲地址
      musicUrl: '',
      // 歌曲封面
      musicCover: '',
      // 歌曲评论
      hotComments: [],
      // 动画播放
      isplay: false,
      isShow: false,
      // mv地址
      mvUrl: ''
    }
  },
  methods: {
    // 歌曲搜索
    searchMusic: function () {
      var that = this
      axios.get('https://autumnfish.cn/search?keywords=' + this.query)
        .then(function (response) {
          // console.log(response);
          // console.log(response.data.result.songs)
          that.musicList = response.data.result.songs
        })
    },
    // 歌曲播放
    playMusic: function (musicId) {
      var that = this
      // console.log(musicId);
      axios.get('https://autumnfish.cn/song/url?id=' + musicId).then(
        function (response) {
          // console.log(response);
          // console.log(response.data.data[0].url);
          that.musicUrl = response.data.data[0].url
        },
        function (err) {
          console.log(err)
        }
      )
      // 歌曲详情获取
      axios.get('https://autumnfish.cn/song/detail?ids=' + musicId).then(
        function (response) {
          //  console.log(response);
          //  console.log(response.data.songs[0].al.picUrl);
          that.musicCover = response.data.songs[0].al.picUrl
        },
        function (err) {
          console.log(err)
        }
      )
      // 歌曲评论
      axios.get('https://autumnfish.cn/comment/hot?type=0&id=' + musicId).then(
        function (response) {
          // console.log(response);
          // console.log(response.data.hotComments);
          that.hotComments = response.data.hotComments
        },
        function (err) {
          console.log(err)
        }
      )
    },
    play: function () {
      // console.log('play');
      this.isplay = true
    },
    pause: function () {
      // console.log('pause')
      this.isplay = false
    },
    // 播放mv
    playMv: function (mvid) {
      var that = this
      axios.get('https://autumnfish.cn/mv/url?id=' + mvid).then(
        function (response) {
          // console.log(response);
          console.log(response.data.data.url)
          that.isShow = true
          that.mvUrl = response.data.data.url
          console.log(that.mvUrl)
        },
        function (err) {
          console.log(err)
        }
      )
    },
    hide: function () {
      this.isShow = false
    }
  }
}
//  src="https://unpkg.com/axios/dist/axios.min.js">
//             // 设置axios的基地址
//             axios.defaults.baseURL = 'https://autumnfish.cn';
//             // axios.defaults.baseURL = 'http://localhost:3000';
</script>

<style>
.wrap {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgb(131, 175, 155) url(https://z3.ax1x.com/2021/05/12/gwvBBq.png);
  background-size: cover;
}
/* * {
            margin: 0;
            padding: 0;
        } */
.player_loge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 3;
  width: 80px;
  height: 21px;
  font-size: 100%;
}

.player_loge a {
  text-decoration: none;
  color: rgb(135, 146, 160);
  cursor: pointer;
}
.search_bar {
  width: 450px;
  height: 40px;
  margin-top: -150px;
  position: absolute;
  left: 50%;
  margin-left: -320px;
  top: 50%;
}
.serach_txt {
  width: 538px;
  height: 38px;
  padding: 0;
  float: left;
  border: 1px solid #41a1cb;
  outline: none;
  text-indent: 10px;
}

.input_sub {
  width: 100px;
  height: 40px;
  border: 0;
  float: left;
  background-color: #41a1cb;
  color: #fff;
  font-size: 16px;
  outline: none;
  cursor: pointer;
}
</style>
